<template>
  <div class="banner-container">
    <AreaTree v-model="list.filter.areaCode" :isAll="false" isDefault />
    <div class="app-container">
      <el-form
        class="list-filter"
        ref="listFilterRef"
        :model="list.filter"
        inline
      >
        <el-form-item prop="name">
          <el-input
            v-model="list.filter.name"
            placeholder="标签名称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="status">
          <Status v-model="list.filter.status" />
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <div class="table-operation">
        <AuthButton @click="c" name="新增" />
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>
      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column label="标签名称" prop="name" />
        <el-table-column label="展示顺序" prop="sort" />
        <el-table-column label="拉取方式" prop="productType">
          <template slot-scope="{ row }">
            {{ row.productType | $value2label(productTypes) }}
          </template>
        </el-table-column>
        <el-table-column label="启用状态" width="80" align="center">
          <template slot-scope="{ row: { id, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="updateStatus({ id, status: status ^ 1 })"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <auth-button @click="r({ id: row.id })" name="查看" />
            <auth-button @click="u({ id: row.id })" name="编辑" />
            <auth-button @click="d({ id: row.id })" name="删除" />
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
        width="70%"
      >
        <template #el-form>
          <el-form-item label="名称" prop="name" :verify="{ maxLength: 7 }">
            <el-input
              v-model="form.data.name"
              placeholder="标签名称"
              maxlength="7"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="所属地区" prop="areaCode" verify>
            <!-- :props="{
                checkStrictly: true,
                multiple: true
              }" -->
            <RegionSelect v-model="form.data.areaCode" disabled />
          </el-form-item>
          <el-form-item label="展示顺序" prop="sort" verify>
            <Sort v-model="form.data.sort" />
          </el-form-item>
          <el-form-item label="商品拉取方式" prop="productType" verify>
            <KiSelect
              v-model="form.data.productType"
              :options="productTypes"
              placeholder="商品拉取方式"
            />
          </el-form-item>
          <el-form-item
            v-if="form.data.productType"
            :label="form.data.productType == '1' ? '选择商品' : '选择分类'"
            prop="relationIds"
            verify
          >
            <BoundGoods
              v-model="form.data.relationIds"
              v-if="form.data.productType == '1'"
            />
            <CategorySelect
              v-model="form.data.relationIds"
              :props="{ multiple: true }"
              v-if="form.data.productType == '2'"
            />
          </el-form-item>
        </template>
      </KiFormDialog>
    </div>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import BoundGoods from '@/components/BoundGoods'
import CategorySelect from '@/components/CategorySelect'

export default {
  mixins: [pageMixin],
  components: { BoundGoods, CategorySelect },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/merchant/merchant-label-area',
      form: {
        data: {
          relationIds: []
        }
      }
    }, {
      getListInitially: false
    }),
  watch: {
    'list.filter.areaCode'(n, o) {
      if(n && !o) {
        this.queryList()
      }
    },
    'form.data.productType' (n, o) {
      if ((n && [1, 2].includes(o)) || !n) {
        this.form.data.relationIds = []
      }
    },
    'form.show' (n) {
      if (n) {
        this.form.data.areaCode = this.list.filter.areaCode
      }
    }
  },
  data () {
    return {
      productTypes: [
        { dataValue: 1, dataName: '手动拉取' },
        { dataValue: 2, dataName: '按商品分类拉取' }
      ]
    }
  }
}
</script>
<style lang="scss">
.banner-container {
  display: flex;
  .app-container {
    flex: 1;
  }
}
</style>
